<html>
<head>
<title>Wepoco: Observations</title>
<script type="text/javascript">
	djConfig = { parseOnLoad:true, isDebug:false };
</script>
<style type="text/css"> 
      @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/resources/dojo.css";
</style> 
                

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- required: a default dijit theme: --> 
<link id="themeStyles" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dijit/themes/tundra/tundra.css"> 
 
	<!-- required: dojo.js --> 
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"
			djConfig="parseOnLoad: true, isDebug: true"></script> 
 
<script>
function pageLoad()
{
  // Check type and date for each map layer that's enabled.
  loadRainInfo( "/latestrain" );
  setup();
}

 dojo.require("dijit.dijit"); // optimize: load dijit layer
 dojo.require("dijit.Calendar");
 dojo.require("dojo.date.locale");
 dojo.require("dojo.parser"); // scan page for widgets
 
 dojo.addOnLoad(pageLoad);
</script>

<!-- keys 
http://map.wepoco.com/  
ABQIAAAAjrevdOcDzRtc2JWIyTrRPBQ1yMtdzTNiYVoL5nrgs3sXr6g1CRSwY1K9Qoi_8zNKy-FV1wfgFadRoQ

http://www.wepoco.com/
ABQIAAAAF5oUqxaWkq3HzHxEjwFoMhSqLCR4vqZD7ui-J2nkp63kVD9LDRS75VKmRTRVCob68yw1NBkMXZHKsg
-->

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjrevdOcDzRtc2JWIyTrRPBQ1yMtdzTNiYVoL5nrgs3sXr6g1CRSwY1K9Qoi_8zNKy-FV1wfgFadRoQ" type="text/javascript"></script>
<script type="text/javascript" src="mpetiles.js"></script>

<script type="text/javascript">
var raintype = null; var raindate = null;
var ndvitype = null; var ndvidate = null;


function changeDate()
{
  // Check type and date for each map layer that's enabled.
  raintype="day";
  // Get the selected date and calculate start of week and of month.
  var dateval = dijit.byId("calendar").attr("value");
  var weekval = new Date(dateval - (dateval.getDay()*24*60*60000));
  var monthval = new Date(dateval - ((dateval.getDate()-1)*24*60*60000));
  raindate =  parseDate(dateval);
  NdviAndRainLoad(ndvitype,ndvidate,raintype,raindate);
}

function parseDate( s ){
  var date = s.getDate();
  var month = s.getMonth() + 1;
  var year = s.getFullYear();
  if(date<10){date = "0" + date;}
  if(month<10){month = "0" + month;} 
  return "" + year + month + date;
}

function myHandler(id,newValue){
  //alert("onChange for id = " + id + ", value: " + newValue);
  changeDate();
}

function loadRainInfo( infoURL ){
     GDownloadUrl(infoURL, function(data, responseCode) {
     xml=GXml.parse(data);
     date = xml.documentElement.getElementsByTagName("date");
     //dateinp = document.getElementById("dateinp");
     //dateinp.value = date[0].childNodes[0].data;
     changeDate();
  }); 
} 

var today = new Date();

function disfunc( date, locale ){
  if(date > today){
   return true;
  }else{
   return false;
  }
}

</script>
</head>
<body class="tundra" onunload="saveLocation();GUnload()">
<div class="container">
<div class="span-24 last">
      <img alt="wepoco: making weather and climate information useful "
       src="logo_small_text30_circ.gif" 
       style="width:531px; height:130px;" />
</div>
  <div class="span-8">
    <form id="form1" action="" name="datesel" method="post">
      <input id="calendar" dojoType="dijit.Calendar" onChange="myHandler(this.id,arguments[0])">
      <br />
      <input type="radio" checked="checked" value="1" name="datespan" id="sp1" />
      <label for="sp1">Day</label>
      <input type="radio" value="7" name="datespan" id="sp2" />
      <label for="sp2">Week</label>
      <input type="radio" value="31" name="datespan" id="sp3" />
      <label for="sp3">Month</label><br />
      <a href="#"
			   onClick="dijit.registry.forEach(function(c){
					c.isDisabledDate = disfunc; //dojo.date.locale.isWeekend;
					c._populateGrid();
				});">disable future</a> 
      <br />
    </form>
      <br /><br />
      <img alt="MPE scale" src="mpe_scale.gif" style="width:256px;height:20px"/>
  </div><!-- left -->
  <div class="span-16 last">
  <!-- the actual map -->
  <div id="map" style="margin:0;width:600px;height:500px;"></div>
  </div><!-- center -->
</div>
</body>
</html>
